<template>
  <div class="login_temp">
    <headertop></headertop>
    <div class="login_form">
      <i class="fa fa-list-ol"></i>
      <x-input placeholder="请输入学号" v-model="usercode"></x-input>
    </div>
    
    <div class="login_form">
      <i class="fa fa-key"></i>
      <x-input placeholder="请输入密码" v-model="password" type="password"></x-input>
     
    </div>

    <div class="tip">温馨提示:未注册用户，登录时将自动注册</div>

    <button class="in" @click="click">登录</button>
    <toast
      v-model="showPositionValue"
      type="text"
      :time="800"
      width="10em"
      is-show-mask
      :text="toastText"
      position="middle"
      @on-hide="jump(isjump)"
    ></toast>
  </div>
</template>

<script>
import { Toast } from 'vux'
import { XButton, XInput, PopupRadio } from 'vux'
import headertop from './Header'
import { login } from '../api/public.js'
import { setToken } from '../utils/auth.js'
export default {
  data() {
    return {
      usercode: '',
      username: '',
      password: '',
      showPositionValue: false, //是否显示提示
      toastText: '', // 提示文本
      isjump: false,
      option3: '请选择',
      options3: ['17计算机一班', '17计算机二班', '17计算机三班', '17计算机四班']
    }
  },
  methods: {
    click() {
      var usercode = this.usercode.trim()

      var password = this.password.trim()
      if (!usercode || !password) {
        // alert("姓名或内容不能为空");
        this.showPositionValue = true
        this.toastText = '学号,密码均不能为空'

        // return;
      } else {
        // 登录注册验证
        login(this.usercode, this.password).then(res => {
          if (res.data.code === 200) {
            setToken(this.usercode)
            this.showPositionValue = true
            this.toastText = res.data.msg
            this.isjump = true
          }else{
            this.showPositionValue = true
            this.toastText = res.data.msg
            this.isjump = false
            this.password =''
          }
        })
      }
    },
    jump(isjump) {
      if(isjump){
        this.$router.push({ path: '/tablelist' }) //编程式
      }else{
        return
      }
     
    }
  },
  components: {
    XInput,
    XButton,
    headertop,
    Toast,
    PopupRadio
  }
}
</script>
<style>
.weui-cell__ft {
  color: #111 !important;
}
.vux-label {
  color: #999;
  margin-left: 30px;
}
.tip {
  margin-top: 20px;
  color: #30336b;
}
.login_temp .in {
  width: 100%;
  height: 40px;
  font-size: 17px;
  margin-top: 25px;
  background: #00a8ff;
  color: white;
  border: none;
  border-radius: 30px;
}
.login_form .fa {
  font-size: 20px;
  top: 12px;
  left: 10px;
  position: absolute;
  color: black;
}
.login_form {
  position: relative;
}
.login_form .weui-cell {
  margin-top: 20px;
  border-bottom: solid 1px black;
}
.login_temp {
  margin: 0 auto;
  width: 90%;
  margin-top: 5%;
  /* height: 100%; */
}
.weui-input {
  text-indent: 30px;
}
button.weui-btn,
input.weui-btn {
  margin-top: 15px;
  /* border-radius: 40px; */
  margin-left: 10px;
}
button.weui-btn_plain-primary,
button.weui-btn_plain-default {
  border-width: 1px;
  background-color: #00a8ff !important ;
  color: white;
  border: 1px solid #00a8ff;
}
</style>
